import { Router, Route, Redirect, Switch } from 'react-router-dom'
import React, { Suspense } from 'react'
import './App.scss'
import AuthRouter from '@/components/AuthRouter'
import history from '@/utils/history.js'
const Login = React.lazy(() => import('@/pages/Login'))
const Layout = React.lazy(() => import('@/pages/Layout'))
const Chart = React.lazy(() => import('@/pages/Mine/Chart/'))
const Edit = React.lazy(() => import('@/pages/Mine/Edit'))
const NotFound = React.lazy(() => import('@/pages/NotFound'))


export default function App() {
    return (
        <Router history={history}>
            <div className='App'>
                <Suspense fallback={<div>loading</div>}>
                    <Switch >
                        <Redirect from='/' to='/home' exact></Redirect>
                        <Route path='/login' component={Login}></Route>
                        <Route path='/home' component={Layout}></Route>
                        <AuthRouter path='/profile/edit' component={Edit}></AuthRouter>
                        <AuthRouter path='/profile/chart' component={Chart}></AuthRouter>
                        <Route component={NotFound}></Route>
                    </Switch>
                </Suspense>
            </div>
        </Router>
    )
}
